<template>
  <table id="tableComponent" class="table table-bordered table-striped">
    <thead>
      <tr class="user-select-none">
        <!-- loop through each value of the fields to get the table header -->
        <th v-if="columns.indexOf('id') != -1" @click="toggleSort">
          Id
          <i v-if="filterParams.sort == 'desc'" class="bi bi-sort-alpha-up" aria-label="Sort Icon"></i>
          <i v-else class="bi bi-sort-alpha-down" aria-label="Sort Icon"></i>
        </th>
        <th v-if="columns.indexOf('topic') != -1">
          <div class="dropdown">
            <span
              class="dropdown-toggle"
              id="dropdownMenuTopic"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              Тема
            </span>
            <ul class="dropdown-menu p-0" aria-labelledby="dropdownMenuTopic">
              <li class="d-flex">
                <input
                  ref="topic_filter"
                  class="form-control me-1"
                  type="text"
                  v-model="filterParams.topic"
                />
              </li>
            </ul>
          </div>
        </th>
        <th v-if="columns.indexOf('current_status') != -1">
          <div class="dropdown">
            <span
              class="dropdown-toggle"
              id="dropdownMenuButtonStatus"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              Статус
            </span>
            <ul
              class="dropdown-menu p-0"
              aria-labelledby="dropdownMenuButtonStatus"
            >
              <select
                v-model="filterParams.status"
                class="form-select"
                aria-label="Default select example"
              >
                <option :value="'closed'">Закрыто</option>
                <option :value="'in_progress'">В работе</option>
                <option :value="'open'">Открыто</option>
                <option :value="undefined">Все</option>
              </select>
            </ul>
          </div>
        </th>
        <th v-if="columns.indexOf('name') != -1">Имя</th>
        <th v-if="columns.indexOf('organization') != -1">Организация</th>
      </tr>
    </thead>
    <tbody>
      <!-- Loop through the list get the each student data -->
      <tr v-for="item in reqs" :key="item">
        <td v-if="columns.indexOf('id') != -1">
          <router-link
            class="text-decoration-none"
            :to="'/req/' + item['id']"
            >{{ item["id"] }}</router-link
          >
        </td>
        <td v-if="columns.indexOf('topic') != -1" v-html="item['topic']"></td>
        <td v-if="columns.indexOf('current_status') != -1">
          {{ ru_status(item["current_status"].status) }}
        </td>
        <td v-if="columns.indexOf('name') != -1">
          <router-link
            class="text-decoration-none"
            :to="'/user/' + item['user'].id"
            >{{ item["user"].name }}</router-link
          >
        </td>
        <td v-if="columns.indexOf('organization') != -1">
          <router-link
            class="text-decoration-none"
            :to="'/organization/' + item['user'].organization.id"
            >{{ item["user"].organization.name }}</router-link
          >
        </td>
      </tr>
    </tbody>
  </table>
</template>
<script>
export default {
  name: "TableReq",
  emits: ["filterUpdate"],
  props: {
    //
    reqs: {
      type: Array,
    },
    columns: {
      type: Array,
      default: function () {
        return ["id", "topic", "current_status", "name", "organization"];
      },
    },
  },
  data() {
    return {
      filterParams: {},
    };
  },
  methods: {
    ru_status(status) {
      if (status == "open") {
        return "открыта"
      } else if (status == "in_progress") {
        return "в разработке"
      } else {
        return "закрыта"
      }
    },
    toggleSort() {
      if (this.filterParams.sort != undefined) {
        this.filterParams.sort = this.filterParams.sort == "asc" ? "desc" : "asc";
      } else {
        this.filterParams.sort = "asc"
      }
    },
  },
  watch: {
    filterParams: {
      handler(newFilter) {
        this.$emit("filterUpdate", newFilter);
      },
      deep: true,
    },
  },
};
</script>